<template>
  <div class="container">
    <!-- toRef是函数，转换响应式对象中某个属性为单独响应式数据，并且值是关联的 -->
    <h5>toRef</h5>
    {{name}} <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
import { reactive, toRef } from "vue";
export default {
  name: "ApiToref",
  setup() {
    // 1. 响应式数据对象
    const obj = reactive({
      name: "李四",
      age: 10,
    });
    //  console.log(obj)
    const name = toRef(obj, "name");
    console.log(name);
    const updateName = () => {
      name.value = "张三";
    };
    return { name, updateName };
  },
};
</script>